<template>
  <el-button>演示调用http获取数据集和记录</el-button>
  <el-button @click="saveData('updateServiceMain')">保存数据</el-button>
  <el-button @click="cleanPiniaCacheData('updateServiceMain')">清除缓存</el-button>
  <el-button plain @click="_PrintInfo=!_PrintInfo;console.log(_PrintInfo)">切换打印信息{{ _PrintInfo }}</el-button>
  <div id="updateServiceMain" style="width: 100%; height: 100%"></div>
</template>
<script setup lang="ts">

import request from "@/utils/request";
import {onMounted, ref} from "vue";
import {usePreviewStore} from "@/stores/modules/xzPreviewStore";

const usePreStore = usePreviewStore();
let _PrintInfo = ref(false);
const dataset = [ //  添加数据集按钮
  { //Json数据
    id: 1,
    value: "新建Json数据集"
  },
  { //http请求数据
    id: 2,
    value: "新建Http接口数据集"
  },
  { //API服务数据
    id: 3,
    value: "API服务数据集"
  },
  {
    id: 4,
    value: "外部数据集"
  }
];
const options = {
  row: 100,
  col: 25,
  width: () => 1900,
  // width:()=>width
  // height:()=>height
  renderArrow: true,  // 是否显式 扩展方向图标
  showFreeze: true,  // 是否显式冻结线
  showGrid: true,   // 是否显式网格线
  showPreviewToolbar: true,
  showBottombar: true,
  showSelect: true,
  dataset
}

const onUpdateDatasetListUrl = "http://localhost:5000/datasetList";


const onUpdateDatasetList = () => {


  return new Promise((resolve, reject) => {
    request.get<any, any>(onUpdateDatasetListUrl).then(res => {
      resolve(res);
    }).catch(err => {
      reject(err);
    });

  })
}
options.onUpdateDatasetList = onUpdateDatasetList

// 绑定授权码
//XZReport.setKey(授权码)  //可以在localhost/127.0.0.1环境下使用
let sheetDesign;
onMounted(() => {
  sheetDesign = XZReportDesigner("#updateServiceMain", options);
  //sheetDesign.on("dataset-edited",on_dataset_edited);

})

function saveData(reportDesignerPreviewId) {
  // config 为报表配置 ， data为 数据配置

  const {config, data} = sheetDesign.getData(); //报表设计器的保存事件
  usePreStore.saveReportDesignerPreviewData(reportDesignerPreviewId, config, data);
  console.log(config)
  console.log(data);
}

function cleanPiniaCacheData(reportDesignerPreviewId) {
  // config 为报表配置 ， data为 数据配置

  usePreStore.cleanReportDesignerPreviewData(reportDesignerPreviewId);

}
</script>

<style scoped>

</style>
